<!DOCTYPE html>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
	var map;
	var brooklyn = new google.maps.LatLng(38.481275996947815, 106.23950958251953);

	var MY_MAPTYPE_ID = 'hiphop';

	function initialize() {

		var stylez = [{
			featureType: "road",
			elementType: "geometry",
			stylers: [{
				saturation: 100
			},
			{
				lightness: 0
			}]
		},
		{ //一级公路
			featureType: "road.arterial",
			elementType: "all",
			stylers: [{
				hue: "#FCE872"
			},
			]
		},
		{ //一级公路边线
			featureType: "road.arterial",
			elementType: "geometry",
			stylers: [{
				hue: "#DAB43C"
			},
			]
		},
		{ //高速公路
			featureType: "road.highway",
			elementType: "all",
			stylers: [{
				hue: "#FAAE5C"
			},
			]
		},
		{ //高速公路边线
			featureType: "road.highway",
			elementType: "geometry",
			stylers: [{
				hue: "#C27E38"
			},
			]
		},
		{ //地方道路
			featureType: "road.local",
			elementType: "all",
			stylers: [{
				hue: "#FFFFFF"
			},
			]
		},
		{ //地方道路边线
			featureType: "road.local",
			elementType: "geometry",
			stylers: [{
				saturation: -70
			},
			{
				hue: "#000000"
			},
			{
				lightness: 50
			}
			]
		},
		{ //水体
			featureType: "water",
			elementType: "all",
			stylers: [{
				saturation: 10
			},
			{
				hue: "#9EB7CF"
			},
			{
				lightness: 0
			}]
		},
		{ //景观->几何体
			featureType: "landscape",
			elementType: "geometry",
			stylers: [{
				saturation: 0
			},
			{
				hue: "#F7F3ED"
			},
			//色调
			{
				lightness: 0
			} //亮度
			]
		},
		{ //景观->人工结构
			featureType: "landscape.man_made",
			elementType: "all",
			stylers: [{
				saturation: 0
			},
			{
				hue: "#A0CC95"
			},
			{
				lightness: 0
			}]
		},
		{ //自然->自然特征
			featureType: "landscape.natural",
			elementType: "all",
			stylers: [{
				saturation: 0
			},
			{
				hue: "#A0CC95"
			},
			{
				lightness: 0
			}]
		}];

		var mapOptions = {
			zoom: 13,
			center: brooklyn,
			mapTypeControlOptions: {
				mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
			},
			mapTypeId: MY_MAPTYPE_ID
		};

		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		var styledMapOptions = {
			name: "设计"
		};

		var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);

		map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
	}
</script>
</head> 
<body onload="initialize()"> 
  <div id="map_canvas" style="width: 900px; height: 480px;"></div> 
</body> 
</html> 